layui.use(function () {
  var table = layui.table;
  var form = layui.form;
  var type = '1';

  setTimeout(() => {
    $('.search-bar > button')[0].click();
  }, 100);

  form.on('submit(search)', function (data) {
    var params = {};
    var url;
    var col = [];
    switch (type) {
      case '1':
        url = '/valve/operate/ss/list';
        params.oilCode = data.field.oilCode;
        params.valveCode = data.field.valveCode;
        params.status = data.field.status;
        params.gatewayCode = data.field.gatewayCode;
        col = [
          {
            field: 'name',
            title: '阀门名称',
            align: 'center',
          },
          {
            field: 'code',
            title: '阀门编号',
            align: 'center',
          },
          {
            field: 'ip',
            title: 'ip',
            align: 'center',
          },
          {
            field: 'port',
            title: '端口',
            align: 'center',
          },
          {
            field: 'addr',
            title: '地址',
            align: 'center',
          },
          {
            field: 'typeDesc',
            title: '操作',
            align: 'center',
          },
          {
            field: 'dataTime',
            title: '操作时间',
            align: 'center',
          },
          {
            field: 'gatewayName',
            title: '网关',
            align: 'center',
          },
          {
            field: 'gatewayCode',
            title: '网关编号',
            align: 'center',
          },
          {
            field: 'oilName',
            title: '所属油罐',
            align: 'center',
          },
        ];
        break;
      case '2':
        url = '/valve/data/ss/list';
        params.oilCode = data.field.oilCode;
        params.valveCode = data.field.valveCode;
        params.status = data.field.status;
        params.gatewayCode = data.field.gatewayCode;
        col = [
          {
            field: 'name',
            title: '阀门名称',
            align: 'center',
          },
          {
            field: 'code',
            title: '阀门编号',
            align: 'center',
          },
          {
            field: 'ip',
            title: 'ip',
            align: 'center',
          },
          {
            field: 'port',
            title: '端口',
            align: 'center',
          },
          {
            field: 'addr',
            title: '地址',
            align: 'center',
          },
          {
            field: 'valueDesc',
            title: '状态',
            align: 'center',
          },
          {
            field: 'dataTime',
            title: '上报时间',
            align: 'center',
          },
          {
            field: 'gatewayName',
            title: '网关',
            align: 'center',
          },
          {
            field: 'gatewayCode',
            title: '网关编号',
            align: 'center',
          },
          {
            field: 'oilName',
            title: '所属油罐',
            align: 'center',
          },
        ];
        break;
      case '3':

        url = '/valve/data/ma/list';
        params.oilCode = data.field.oilCode;
        params.valveCode = data.field.valveCode;
        params.status = data.field.status;
        params.gatewayCode = data.field.gatewayCode;
        col = [
          {
            field: 'name',
            title: '阀门名称',
            align: 'center',
          },
          {
            field: 'code',
            title: '阀门编号',
            align: 'center',
          },
          {
            field: 'ip',
            title: 'ip',
            align: 'center',
          },
          {
            field: 'port',
            title: '端口',
            align: 'center',
          },
          {
            field: 'addr',
            title: '地址',
            align: 'center',
          },
          {
            field: 'valueDesc',
            title: '状态',
            align: 'center',
          },
          {
            field: 'dataTime',
            title: '上报时间',
            align: 'center',
          },
          {
            field: 'gatewayName',
            title: '网关',
            align: 'center',
          },
          {
            field: 'gatewayCode',
            title: '网关编号',
            align: 'center',
          },
          {
            field: 'oilName',
            title: '所属油罐',
            align: 'center',
          },
        ];
        break;
      case '4':

        url = '/gateway/list';
        params.name = data.field.oilCode;
        params.code = data.field.valveCode;
        params.type = data.field.status;
        params.ip = data.field.gatewayCode;
        col =
          [
            //表头
            {
              field: 'name',
              title: '名称',
              align: 'center',
            },
            {
              field: 'code',
              title: '编号',
              align: 'center',
            },
            {
              field: 'typeDesc',
              title: '类型',
              align: 'center',
            },
            {
              field: 'channels',
              title: '通道数',
              align: 'center',
            },
            {
              field: 'ip',
              title: 'ip',
              align: 'center',
            },
            {
              field: 'port',
              title: '端口号',
              align: 'center',
            },
            {
              field: 'lastTime',
              title: '最后上报时间',
              align: 'center',
            },
          ]
        break;
    }
    initTable(url, params, col);
    return false;
  });

  function initTable(url, params, col) {
    var height = $('.contain').innerHeight() - 36 - 98 - 26;

    //第一个实例
    table.render({
      title: '',
      height: height,
      text: {
        none: '暂无数据',
      },
      elem: '#table',
      skin: 'nob',
      headers: {
        SessionId: JSON.parse(localStorage.getItem('userInfo')).sessionId,
      },
      url: ajaxPrefix() + url,
      where: params,
      parseData: function (res) {
        //res 即为原始返回的数据
        return {
          code: res.status == 200 ? 0 : 1, //解析接口状态
          msg: res.message, //解析提示文本
          count: res.result ? res.result.total : 0, //解析数据长度
          data: res.result ? res.result.data : [], //解析数据列表
        };
      },
      request: {
        pageName: 'pageNum', //页码的参数名称，默认：page
        limitName: 'pageSize', //每页数据量的参数名，默认：limit
      },
      page: {
        //开启分页
        limit: 10,
      },
      cols: [col],
    });
  }

  $('.tab-item').click(function (e) {
    $(e.currentTarget).addClass('active').siblings().removeClass('active');
    type = $(this)[0].dataset.type;

    switch (type) {
      case "1":
        $('#oilCode').attr('placeholder', '油罐编号')
        $('#valveCode').attr('placeholder', '阀门编号')
        $('#gatewayCode').attr('placeholder', '网关编号')
        $('#status').empty().append(`
      <option value="">全部</option>
      <option value="0">关闭</option>
      <option value="1">打开</option>
      `)
        break;
      case "2":
        $('#oilCode').attr('placeholder', '油罐编号')
        $('#valveCode').attr('placeholder', '阀门编号')
        $('#gatewayCode').attr('placeholder', '网关编号')
        $('#status').empty().append(`
      <option value="">全部</option>
      <option value="0">关闭</option>
      <option value="1">打开</option>
      `)
        break;
      case "3":
        $('#oilCode').attr('placeholder', '油罐编号')
        $('#valveCode').attr('placeholder', '阀门编号')
        $('#gatewayCode').attr('placeholder', '网关编号')
        $('#status').empty().append(`
      <option value="">全部</option>
      <option value="0">本地</option>
      <option value="1">远程</option>
      `)
        break;
      case "4":
        $('#oilCode').attr('placeholder', '网关名称')
        $('#valveCode').attr('placeholder', '网关编号')
        $('#gatewayCode').attr('placeholder', 'ip地址')

        $('#status').empty().append(`
      <option value="">全部</option>
      <option value="1">本地丨远程网关</option>
      <option value="2">阀门开关网关</option>
      `)
        break;

      default:
        break;
    }
    form.render();

    $('.search-bar > button')[0].click();
  });
});
